<template>
  <div class="channel-edit">
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <van-button
          size="mini"
          round
          type="danger"
          @click="bjshow = !bjshow"
          plain
        >
          编辑
        </van-button>
      </van-cell>
      <van-grid>
        <!-- 高亮有问题 求助 -->
        <van-grid-item
          @click="gl(index)"
          :class="{ current: active === index }"
          v-for="(value, index) in channelistL"
          :key="value.id"
          :text="value.name"
        >
          <span>{{ value.name }}</span>
          <van-icon
            @click="delcan(value.id)"
            v-show="bjshow && index !== 0"
            name="cross"
            class="btn"
          />
        </van-grid-item>
      </van-grid>
    </div>
    <div class="channel">
      <van-cell title="频道推荐" :border="false"></van-cell>
      <van-grid>
        <van-grid-item
          class="channel-item"
          @click="add(item)"
          v-for="item in optionchannerlist"
          :key="item.id"
          :text="item.name"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
import { setStroagechannel } from '@/utils/storage'
export default {
  name: 'ChannelEdit',
  components: {},
  props: ['active'],
  data() {
    return {
      bjshow: true
    }
  },

  computed: {
    ...mapState('channel', ['channelistL']),
    ...mapGetters('channel', ['optionchannerlist'])
  },
  methods: {
    ...mapMutations('channel', ['delchannel']),
    ...mapMutations('channel', ['addchannel']),
    add(item) {
      // console.log(item)
      this.addchannel(item)
      console.log(this.channelistL)
      setStroagechannel(this.channelistL)
    },
    // 切换高亮 与切换导航类容
    gl(index) {
      if (this.bjshow) {
        // console.log(index)
        return
      }
      this.$emit('gl', index)
    },
    delcan(id) {
      if (this.channelistL.length <= 4) {
        return this.$toast('提示文案')
      }

      this.delchannel(id)
    }
  }
}
</script>

<style scoped lang="less">
.channel {
  padding: 15px;
  font-size: 14px;
  ::v-deep .van-button--mini {
    height: 22px;
    min-width: 50px;
  }
  .btn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 14px;
  }
}
.current {
  color: #e5615b;
  font-weight: bold;
}
</style>
